﻿<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:c="clr-namespace:VS.Infrastructure.Controls;assembly=VS.Infrastructure"
    xmlns:conv="clr-namespace:VS.Infrastructure.Converters;assembly=VS.Infrastructure"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:VS_MainModule="clr-namespace:VS.MainModule" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="VS.MainModule.Views.ArticleView"
    mc:Ignorable="d" 
    d:DataContext="{d:DesignData /SampleData/ArticleViewModelSampleData.xaml}"    
    d:DesignHeight="600" d:DesignWidth="400" x:Name="uc">

    <UserControl.Resources>

        <Style x:Key="Bouncy" TargetType="ContentControl">
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ContentControl">
                        <ContentPresenter x:Name="contentPresenter" Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="-4,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5" Opacity="0.15">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseEnter">
                                    <ei:GoToStateAction StateName="MouseOver"/>
                                </i:EventTrigger>
                                <i:EventTrigger EventName="MouseLeave">
                                    <ei:GoToStateAction StateName="MouseLeave"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            <VisualStateManager.CustomVisualStateManager>
                                <ei:ExtendedVisualStateManager/>
                            </VisualStateManager.CustomVisualStateManager>
                            <ContentPresenter.RenderTransform>
                                <CompositeTransform/>
                            </ContentPresenter.RenderTransform>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="VisualStateGroup">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.7"/>
                                        <VisualTransition GeneratedDuration="0:0:0.7" To="MouseOver">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <BackEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                        <VisualTransition GeneratedDuration="0:0:0.7" To="MouseLeave">
                                            <VisualTransition.GeneratedEasingFunction>
                                                <BounceEase EasingMode="EaseOut"/>
                                            </VisualTransition.GeneratedEasingFunction>
                                        </VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="1.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="0.45" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseLeave"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </ContentPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="RichTextBox">
            <Style.Setters>
                <Setter Property="IsHitTestVisible" Value="False"/>
                <Setter Property="BorderThickness" Value="0"/>
            </Style.Setters>
        </Style>

        <conv:DebugConverter x:Key="debug" />
        <ControlTemplate x:Key="ValidationToolTipTemplate">
        	<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
        		<Grid.RenderTransform>
        			<TranslateTransform x:Name="xform" X="-25"/>
        		</Grid.RenderTransform>
        		<VisualStateManager.VisualStateGroups>
        			<VisualStateGroup x:Name="OpenStates">
        				<VisualStateGroup.Transitions>
        					<VisualTransition GeneratedDuration="0"/>
        					<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
        						<Storyboard>
        							<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="xform">
        								<DoubleAnimation.EasingFunction>
        									<BackEase Amplitude=".3" EasingMode="EaseOut"/>
        								</DoubleAnimation.EasingFunction>
        							</DoubleAnimation>
        							<DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
        						</Storyboard>
        					</VisualTransition>
        				</VisualStateGroup.Transitions>
        				<VisualState x:Name="Closed">
        					<Storyboard>
        						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
        					</Storyboard>
        				</VisualState>
        				<VisualState x:Name="Open">
        					<Storyboard>
        						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="xform"/>
        						<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
        					</Storyboard>
        				</VisualState>
        			</VisualStateGroup>
        		</VisualStateManager.VisualStateGroups>
        		<Border Background="#052A2E31" CornerRadius="5" Margin="4,4,-4,-4"/>
        		<Border Background="#152A2E31" CornerRadius="4" Margin="3,3,-3,-3"/>
        		<Border Background="#252A2E31" CornerRadius="3" Margin="2,2,-2,-2"/>
        		<Border Background="#352A2E31" CornerRadius="2" Margin="1,1,-1,-1"/>
        		<Border Background="#FFDC000C" CornerRadius="2"/>
        		<Border CornerRadius="2">
        			<TextBlock Foreground="White" MaxWidth="250" Margin="8,4,8,4" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}" UseLayoutRounding="false"/>
        		</Border>
        	</Grid>
        </ControlTemplate>
        <Style x:Key="TabPhoneStyle" TargetType="ListBox">
        	<Setter Property="Padding" Value="1"/>
        	<Setter Property="Background" Value="#FFFFFFFF"/>
        	<Setter Property="Foreground" Value="#FF000000"/>
        	<Setter Property="HorizontalContentAlignment" Value="Left"/>
        	<Setter Property="VerticalContentAlignment" Value="Top"/>
        	<Setter Property="IsTabStop" Value="False"/>
        	<Setter Property="BorderThickness" Value="1"/>
        	<Setter Property="TabNavigation" Value="Once"/>
        	<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        	<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        	<Setter Property="BorderBrush">
        		<Setter.Value>
        			<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        				<GradientStop Color="#FFA3AEB9" Offset="0"/>
        				<GradientStop Color="#FF8399A9" Offset="0.375"/>
        				<GradientStop Color="#FF718597" Offset="0.375"/>
        				<GradientStop Color="#FF617584" Offset="1"/>
        			</LinearGradientBrush>
        		</Setter.Value>
        	</Setter>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="ListBox">
        				<Grid>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="ValidationStates">
        							<VisualState x:Name="Valid"/>
        							<VisualState x:Name="InvalidUnfocused"/>
        							<VisualState x:Name="InvalidFocused"/>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{TemplateBinding Background}">
        						<ItemsPresenter Margin="0,0,0,1" d:LayoutOverrides="Width, Height"/>
        					</Border>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
        <Style x:Key="TabPhoneItemStyle" TargetType="ListBoxItem">
        	<Setter Property="Padding" Value="3"/>
        	<Setter Property="HorizontalContentAlignment" Value="Left"/>
        	<Setter Property="VerticalContentAlignment" Value="Top"/>
        	<Setter Property="Background" Value="Transparent"/>
        	<Setter Property="BorderThickness" Value="1"/>
        	<Setter Property="TabNavigation" Value="Local"/>
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="ListBoxItem">
        				<Grid Background="{TemplateBinding Background}">
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Normal"/>
        							<VisualState x:Name="MouseOver">
        								<Storyboard>
        									<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="SelectionStates">
        							<VisualState x:Name="Unselected"/>
        							<VisualState x:Name="Selected">
        								<Storyboard>
        									<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
        									<ColorAnimation Duration="0" To="#FF003191" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="fillColor2" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="SelectedUnfocused">
        								<Storyboard>
        									<DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="fillColor2" d:IsOptimized="True"/>
        									<ColorAnimation Duration="0" To="#FF003191" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="fillColor2" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="FocusStates">
        							<VisualState x:Name="Focused">
        								<Storyboard>
        									<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
        										<DiscreteObjectKeyFrame KeyTime="0">
        											<DiscreteObjectKeyFrame.Value>
        												<Visibility>Collapsed</Visibility>
        											</DiscreteObjectKeyFrame.Value>
        										</DiscreteObjectKeyFrame>
        									</ObjectAnimationUsingKeyFrames>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Unfocused"/>
        						</VisualStateGroup>
        						<VisualStateGroup x:Name="LayoutStates">
        							<VisualState x:Name="AfterLoaded"/>
        							<VisualState x:Name="BeforeLoaded"/>
        							<VisualState x:Name="BeforeUnloaded"/>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Cursor="Hand"/>
        					<Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusX="6" RadiusY="6" Width="6" Height="6" StrokeThickness="0"/>
        					<Rectangle x:Name="fillColor2" Fill="#FF001641" IsHitTestVisible="False" Opacity="0" RadiusX="6" RadiusY="6" Width="6" Height="6" StrokeThickness="0"/>
        					<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="0" Visibility="Collapsed"/>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>

    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="21"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition />
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>

            <c:InertialPagedScrollViewer 
                x:Name="isv"    
                Grid.ColumnSpan="3"
                Padding="8"
                BorderThickness="0"                
                Orientation="Horizontal"
                PageCount="{Binding Articles.Count}"
                PageIndex="{Binding SelectedPageIndex, Mode=TwoWay}">
                <c:InertialPagedScrollViewer.EasingFunction>
                    <ElasticEase Oscillations="3" Springiness="15" EasingMode="EaseOut" />
                </c:InertialPagedScrollViewer.EasingFunction>
                <ItemsControl       
                    x:Name="articles"
                    ItemsSource="{Binding Articles}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Cursor="Hand" Width="{Binding Path=PageWidth, ElementName=isv}" Margin="{Binding Path=Padding, ElementName=isv}">
                                <Border Background="White" BorderBrush="LightGray" BorderThickness="1">
                                    <Border.Effect>
                                        <DropShadowEffect Color="LightGray" BlurRadius="6" Opacity="0.8" />
                                    </Border.Effect>
                                </Border>
                                <ScrollViewer BorderThickness="0" Margin="3">
                                    <c:XamlControl                                         
                                        SourceAssembly="VS.MainModule, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" 
                                        Uri="{Binding Uri}"/>
                                </ScrollViewer>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </c:InertialPagedScrollViewer>

            <ContentControl MouseLeftButtonUp="Left_MouseLeftButtonDown" VerticalAlignment="Center" Style="{StaticResource Bouncy}" Cursor="Hand">
                <Path Width="32" Height="32" Data="F1 M1.2354352,0 C0.50531471,0 0,0.51075161 0,1.3890302 L0,30.603424 C0,31.850876 0.99907833,32.356586 2.2191513,31.732861 L31.085415,17.117277 C31.694513,16.813852 32,16.409182 32,16.004614 L32,16.004614 C32,15.58317 31.694513,15.178603 31.085415,14.875176 L2.2191513,0.26288685 C1.8655834,0.085914098 1.5332414,0 1.2354352,0 L1.2354352,0 z">
                    <Path.RenderTransform>
                        <CompositeTransform TranslateX="24" ScaleX="-1"/>
                    </Path.RenderTransform>
                    <Path.Fill>
                        <RadialGradientBrush RadiusX="0.536056" RadiusY="0.470374" Center="0.126765,0.261811" GradientOrigin="0.126765,0.261811">
                            <GradientStop Color="#FF001641" Offset="0"/>
                            <GradientStop Color="#FF0031CA" Offset="1"/>
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
            </ContentControl>

            <ContentControl MouseLeftButtonDown="Right_MouseLeftButtonDown" Grid.Column="2" VerticalAlignment="Center" Style="{StaticResource Bouncy}" Cursor="Hand">
                <Path Width="32" Height="32" Data="F1 M1.2354352,0 C0.50531471,0 0,0.51075161 0,1.3890302 L0,30.603424 C0,31.850876 0.99907833,32.356586 2.2191513,31.732861 L31.085415,17.117277 C31.694513,16.813852 32,16.409182 32,16.004614 L32,16.004614 C32,15.58317 31.694513,15.178603 31.085415,14.875176 L2.2191513,0.26288685 C1.8655834,0.085914098 1.5332414,0 1.2354352,0 L1.2354352,0 z">
                    <Path.RenderTransform>
                        <CompositeTransform TranslateX="18" />
                    </Path.RenderTransform>
                    <Path.Fill>
                        <RadialGradientBrush RadiusX="0.536056" RadiusY="0.470374" Center="0.126765,0.261811" GradientOrigin="0.126765,0.261811">
                            <GradientStop Color="#FF001641" Offset="0"/>
                            <GradientStop Color="#FF0031CA" Offset="1"/>
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
            </ContentControl>
        </Grid>

        <ListBox
            x:Name="lb"
            BorderThickness="0"
            Background="Transparent"
            Margin="2"            
            Grid.Row="1" Grid.Column="1" 
            VerticalContentAlignment="Center" HorizontalContentAlignment="Center" 
            HorizontalAlignment="Center"
            ItemsSource="{Binding Articles}"
            SelectedIndex="{Binding ElementName=isv, Path=PageIndex, Mode=TwoWay}" Style="{StaticResource TabPhoneStyle}" ItemContainerStyle="{StaticResource TabPhoneItemStyle}" FontSize="10.667">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Rectangle 
                        RadiusX="6" RadiusY="6"
                        Width="6" Height="6" 
                        Fill="LightGray"
                        ToolTipService.ToolTip="{Binding Label}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

</UserControl>
